<template>
  <view
    class="open-order-contianer bg-theme"
    :class="{ darkStyle: theme == 'dark' }"
  >
    <view class="open-order-main bg-theme">
      <view class="open-order-list" v-if="!isEmpty">
        <order-card v-for="(item, index) in list" :key="index" :info="item">
          <block slot="head-right">
            <!--            <view
              class="button"
              @click.stop="cancelOrder(item)"
              hover-class="hover-button"
              :hover-stay-time="50"
            >
              {{ $t("orderCard.status[0]") }}
            </view> -->
            <ex-button
              class="cancel-btn"
              size="normal"
              type="blank"
              @click="cancelOrder(index, item)"
              :loading="index === submmitIndex"
            >
              {{ $t("orderCard.status[0]") }}
            </ex-button>
          </block>
        </order-card>
      </view>
      <view v-else style="min-height: 500rpx">
        <ex-empty type="document"></ex-empty>
      </view>
    </view>
  </view>
</template>

<script>
import OrderCard from "@/components/trade/buy/OrderCard.vue";
export default {
  components: { OrderCard },
  name: "OpenOrder",
  props: {
    match_id: {
      type: [Number, String],
      required: true,
    },
    direction: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      submmitIndex: undefined,
      loading: false,
      tx_in: { list: [], pagination: { page: 1, limit: 100, total: 0 } },
      tx_out: { list: [], pagination: { page: 1, limit: 100, total: 0 } },
    };
  },
  watch: {
    direction() {
      this.fetchTx();
    },
    wssData(newValue) {
      this.updataData(newValue);
    },
  },
  computed: {
    list() {
      return this.direction == 0 ? this.tx_in.list : this.tx_out.list;
    },
    isEmpty() {
      return this.$u.test.isEmpty(this.list);
    },
    wssData() {
      return this.$store.state.wss.wssData;
    },
  },
  mounted() {
    this.fetchTx();
  },
  methods: {
    updataData(item) {
      if (item.type === "TX_MATCHED") {
        if (item.way === "out" && this.direction == 1) {
          const index = this.tx_out.list.findIndex(
            (tx) => tx.id === item.order.id
          );
          this.tx_out.list.splice(index, 1);
        }
        if (item.way === "in" && this.direction == 0) {
          const index = this.tx_in.list.findIndex(
            (tx) => tx.id === item.order.id
          );
          this.tx_in.list.splice(index, 1);
        }
      }
    },
    async fetchTx() {
      const path = this.direction == 0 ? "tx_in" : "tx_out";
      const pagination =
        this.direction == 0 ? this.tx_in.pagination : this.tx_out.pagination;
      const params = {
        page: pagination.page,
        limit: pagination.limit,
        currency_match_id: this.match_id,
      };
      const res = await this.$u.get(`/${path}/list`, params);
      if (res.code === 1) {
        const data = res.data;
        if (this.direction == 0) {
          const pagination = this.tx_in.pagination;
          pagination.page === 1
            ? (this.tx_in.list = data?.data)
            : this.tx_in.list.push(...data.data);
          pagination.total = data.total;
        } else {
          const pagination = this.tx_out.pagination;
          pagination.page === 1
            ? (this.tx_out.list = data?.data)
            : this.tx_out.list.push(...data.data);
          pagination.total = data.total;
        }
      }
    },
    loadMore() {},
    fetchOpenOrderHistory() {
      const path = "/tx_history/getALlcurrentEntrust";
      this.$u.get(path).then((res) => {
        if (res.code == 1) {
          let list = res.data;
          list.sort((a, b) => {
            let at = new Date(a.updated_at); // a timestamp
            let bt = new Date(b.updated_at);
            return at < bt ? -1 : 1;
          });
          list.reverse();
          this.openOrderList = list;
        }
      });
    },
    async cancelOrder(index, item) {
      let { id, way } = item;
      const path = way == 1 ? "/tx_in/cancel" : "/tx_out/cancel";
      const params = { id };
      this.submmitIndex = index;
      const res = await this.$u.get(path, params);
      this.submmitIndex = undefined;
      if (res.code == 1) {
        if (this.direction == 1) {
          const index = this.tx_out.list.findIndex((tx) => tx.id === item.id);
          this.tx_out.list.splice(index, 1);
        } else if (this.direction == 0) {
          const index = this.tx_in.list.findIndex((tx) => tx.id === item.id);
          this.tx_in.list.splice(index, 1);
        }
        this.$u.toast(this.$t("openOrder.tips[0]"));
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/mixins.less";

.open-order-contianer {
  .open-order-head {
    height: 88rpx;
    line-height: 88rpx;
    border-bottom: 2rpx solid #ebeced;
    padding: 0 30rpx;
    font-size: 36rpx;
    .open-order-title {
    }
  }
  .open-order-main {
    position: relative;
    min-height: 400rpx;
    .safe-padding-bottom(10px);
  }
}

.green {
  color: @green;
}

.button {
  background-color: #000;
  padding: 0 20rpx;
  color: #fff;
  font-weight: normal;
  &.hover-button {
    opacity: 0.8;
  }
}
</style>
